<template>
  <div id="container" />
</template>

<script>
// 引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  // 模块命名
  name: 'GaodeMap',
  data() {
    return {
      map: null, // 初始化 map 对象
      pathArr: [
        [
          [121.7789, 31.3102],
          [121.7279, 31.3548],
          [121.5723, 31.4361],
          [121.5093, 31.4898],
          [121.5624, 31.4864],
          [121.5856, 31.4547],
          [121.7694, 31.3907],
          [121.796, 31.3456],
          [121.7789, 31.3102]
        ]
      ]
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: '8165a8fe4a8dcb9aadcb88405e2bb336', // 此处填入我们注册账号后获取的Key
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 5, // 初始化地图级别
          center: [105.602725, 37.076636] // 初始化地图中心点位置
        })
        this.addMarker(AMap)
        this.createInfoWindow(AMap)
        this.addPolyline(AMap)
        this.createDefaultLayer(AMap)
        this.createPolygon(AMap)
        this.createCaddSerch(AMap)
      }).catch(e => {
        console.log(e)
      })
    },
    // 添加点标记
    addMarker(AMap) {
      const marker = new AMap.Marker({
        position: [105.602725, 37.076636], // 点标记在地图上显示的位置
        title: '北京' // 点标记显示的标题
      })
      marker.setMap(this.map)
    },
    // 创建自定义窗体
    createInfoWindow(AMap) {
      const infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: '<div>高德地图</div>',
        offset: new AMap.Pixel(16, -45) // 窗体显示位置偏移量
      })
      const onMarkerClick = (e) => {
        infoWindow.open(this.map, e.target.getPosition())
      }
      const marker = new AMap.Marker({
        position: [105.602725, 37.076636], // 点标记在地图上显示的位置
        title: '未知' // 点标记显示的标题
      })
      marker.setMap(this.map)
      marker.on('click', onMarkerClick)
    },
    // 添加折线
    addPolyline(AMap) {
      const polyline = new AMap.Polyline({
        path: this.lineArr, // 设置折线的节点数组
        strokeColor: '#189450', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 10, // 线宽
        strokeStyle: 'solid', // 线样式
        strokeDasharray: [10, 5] // 补充线样式
      })
      polyline.setMap(this.map)
    },
    // 创建默认图层
    createDefaultLayer(AMap) {
      const trafficLayer = AMap.createDefaultLayer({
        zIndex: 10,
        viewMode: '2D', // 设置默认图层显示的视图模式
        zoom: 11, // 初始化地图级别
        center: [105.602725, 37.076636] // 初始化地图中心点位置
      })
      trafficLayer.setMap(this.map)
    },
    // 创建多边形
    createPolygon(AMap) {
      const polygon = new AMap.Polygon({
        path: this.pathArr, // 设置多边形边界路径
        strokeColor: '#189450', // 线颜色
        strokeOpacity: 0.7, // 线透明度
        strokeDasharray: [5, 5], // 补充线样式
        strokeWeight: 3, // 线宽
        fillColor: '#1791fc', // 填充色
        fillOpacity: 0.5 // 填充透明度
      })

      polygon.on('click', () => {
        polygon.setOptions({
          fillOpacity: 0.8,
          fillColor: '#00b0ff'
        })
      })
      polygon.setMap(this.map)
    },
    // 添加搜索
    addSearch(AMap) {
      const map = new AMap.PlaceSearch({
        // pageS
      })
    }
  }
}
</script>

<style>
    #container {
        width: 100%;
        height: 100%;
    }
</style>
